<include file='Public:head'/>
<link rel="stylesheet" href="__PUBLIC__/css/login.css"/>
<div id="logo">
    <img id="logo_img" src="__PUBLIC__/imgs/logo.png" alt="">
</div>
<form style="height:395px;" id="login" action="{:U(GROUP_NAME . '/Login/registerHandle')}" method="post">
    <h1>Register</h1>
    <fieldset id="inputs">
        <input name="username" id="username" type="text" placeholder="Username" autofocus required>   
        <input name="email" id="email"  type="email" placeholder='Email' required>
        <input name="password" id="password" type="password" placeholder="Password" required>
        <input name="confirm" id="confirm"  type="password" placeholder='confirm password' required>
        <input name="verify" id="verify" style="background: none; width:150px;"  type="text" placeholder='Verify' autocomplete="off" required>
        <div id="warning"></div>
    </fieldset>
    <img id="verify_img" style="width: 100px;height: 42px;position: absolute;right: 120px;top: 312px;" src="{:U(GROUP_NAME . '/Login/verify')}" alt="">
    <fieldset id="actions">
        <input type="submit" id="submit" value="Register">
        <a style="margin-right:215px" href="{:U(GROUP_NAME . '/Login/index')}">Login</a>
    </fieldset>
</form>
<br><br>
<div style="text-align:center;clear:both">

</div>
<script>
    $(function(){     
        setTimeout(function(){
            $('input[type=text],input[type=password]').each(function(){
                $(this).val('');
            })   
        },500);
        $('#verify_img').click(function(){
            change_code();
        });
        var status=true;
        $('#username').bind('blur',function(){
            $.post("{:U(GROUP_NAME . '/Login/isUserExistHandle')}",{username:$(this).val()},function(data){
                if(!data.status){
                    $('#warning').html('');
                    status=true;
                }
                else{
                    $('#warning').html('用户名已被注册').css({
                        color:'orange'
                    });
                    status=false;
                }
            })
        })
        $('#confirm').bind('blur', function() {
            if($('#password').val() != $("#confirm").val()) {
                $('#warning').html('两次输入密码不一致').css({
                    color:'red'
                });
                status=false;
            } else {
                $('#warning').html('');
                status=true;
            }
        })
        // $('#submit').bind('click',function(){
        //     if($('#password').val()!=$('#confirm').val()){
        //         alert('两次输入密码不一致');
        //     }
        //     else{
        //         if(status&&$('#password').val()&&$('#verify').val()&&$('#confirm').val()&&$('#email').val()){
        //             $('#login').submit();
        //         }
        //         else{
        //             alert('输入信息不完全');
        //         }
        //     }
        // })
        function change_code() {
            $("#verify_img").attr("src", "{:U(GROUP_NAME . '/Login/verify')}" + '/' + Math.random());
        }
        $('#verify').bind('blur',function(){
            $.post("{:U(GROUP_NAME . '/Login/ajaxVerify')}",{verify:$(this).val()},function(data){
                if(!data.status){
                    $('#warning').html('验证码错误，请重新输入').css({
                            color:'red'
                    });
                    status=false;
                }
                else{
                    $('#warning').html('');
                    status=true;
                }
            })
        })
    })
   
</script>
<include file='Public:footer/'>